<template>
	<view>
		<view class="header">
			<view class="jiedana">接单</view>
			<view class="xinxia">
				<view class="jiedanshifu">
					<view style=" color: #fff; width: 100%;float: left;margin-top: 20upx;">
						<view
							style="float: left; font-size: 48upx;font-family: DingTalk JinBuTi, DingTalk JinBuTi; margin-left: 20upx;">
							李师傅</view>
						<view
							style="font-size: 24upx;float: left; margin-left: 20upx;line-height: 40upx; height: 40upx;">
							接单中</view>
					</view>
					<view style=" color: #fff; width: 100%;float: left;margin-left: 10upx;">晋A88888 劳斯莱斯</view>
				</view>
				<image :src="$imgSrc('static/images/vx.png')"  style="width: 100upx; height: 100upx; float: right;margin-top: 30upx;">
				</image>
			</view>
			<view class="tablidna">
				<view class="chelgu">
					<image src="../../static/add.png" style="width: 30upx; height: 30upx; float: left;"></image>
					<view style="float: left;margin-left: 10upx;"> 车辆管理</view>

				</view>
				<image :src="$imgSrc('static/images/dwzx.jpg')" class="tupdinw"></image>
				<view class="chelgu">
					<image src="../../static/dwt.png" style="width: 30upx; height: 30upx; float: left;"></image>
					<view style="float: left;margin-left: 10upx;"> 江苏省徐州市泉山区奎南铁路小区七号楼</view>

				</view>
			</view>
			<view v-for="(item,index) in 3" class="dindanlistab">
				<view class="ddnriong">
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">订单编号:202325698714568
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							2023-11-24 01:59:29</view>
					</view>
					<view class="huoyuns">
						<view class="hya">货运</view>
						<view style="font-size: 32upx;margin-left: 10upx;float: left; line-height: 44upx;">小面·6米8</view>
					</view>
					<view class="zhuangxie">
						<view class="dinwx">
							<view class="z">装</view>
							<view class="shuru">
								<view style="font-size: 36upx;">徐州软件园</view>
								<view>徐州软件园</view>
							</view>
						</view>
						<view class="dinwx">
							<view class="x">卸</view>
							<view class="shuru">
								<view style="font-size: 36upx;">奎南铁路小区</view>
								<view>江苏省徐州市泉山区软件路6号向东100米</view>
							</view>
						</view>

					</view>
					<view class="mymone">
						<view class="wdqb">

							<view class="yuemone">
								<view class="litbs">
									<view style="width: 100%;height: 80upx;float: left;line-height: 80upx;">价格</view>
									<view style="width: 100%;height: 80upx;float: left;line-height: 40upx; color: red;">
										￥1580.00</view>
								</view>
								<view
									style="width: 2upx; height: 40upx; float: left;margin-top: 50upx;background: #ccc;">
								</view>
								<view class="litbs">
									<view style="width: 100%;height: 80upx;float: left;line-height: 80upx;">订单距离</view>
									<view style="width: 100%;height: 80upx;float: left;line-height: 40upx;">600km</view>
								</view>
								<view
									style="width: 2upx; height: 40upx; float: left;margin-top: 50upx;background: #ccc;">
								</view>
								<view class="litbs">
									<view style="width: 100%;height: 80upx;float: left;line-height: 80upx;color:">用车时间
									</view>
									<view style="width: 100%;height: 80upx;float: left;line-height: 40upx;">今天14:00
									</view>
								</view>

							</view>
						</view>
					</view>
					<view class="bzhua">
						<view>备注：请提前出发谢谢，东西很重要，提前到的话现场奖 人民币100元。</view>
					</view>
					<view @click="showFunc(2)" class="ckxq">查看详情</view>
					<!--1-->
					<view @click="showFunc(3)" class="get-bnt">立即抢单</view>
				</view>
			</view>

			<view class="h80" style="clear:both;"></view>
			<u-modal title="" :width="info.mode==1?'480upx':'638upx'" :show="show" :closeOnClickOverlay="false" :showConfirmButton="false"
				:showCancelButton="false">
				<my-model style="width:100%;":info="info" @close="close"></my-model>
			</u-modal>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				info: {
					mode:1
				},

			}
		},
		methods: {
			close(){
			     this.show=false;
			},
			showFunc(mode) {
				if (mode == 1) {
					this.info = {
						//icon:"error",
						icon: "error",
						title: "审核失败",
						content: "资料提交失败",
						bnt: ["联系客服", "重新提交"],
						mode: mode
					}
				} else if(mode==2){
					this.info = {
						//icon:"error",
						icon: "error",
						bnt: ["去缴纳"],
						colse_icon:true,
						mode: mode
					}
				}else{
					this.info = {
						icon: "error",
						title: "抢单成功",
						bnt: ["确认"],
						colse_icon:true,
						mode: mode
					}
				}
				this.show = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		height: 418upx;
		height: 418upx;
		background: linear-gradient(189deg, #0085FC 0%, #02A8FE 100%);
		border-radius: 0upx 0upx 0upx 0upx;
		opacity: 1;
	}

	.jiedana {
		width: 100%;
		height: 50upx;
		float: left;
		margin-top: 88upx;
		text-align: center;
		line-height: 50upx;
		color: #fff;

	}

	.xinxia {
		width: 90%;
		height: 150upx;
		float: left;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.jiedanshifu {
		width: 60%;
		height: 100%;
		float: left;
	}

	.tablidna {
		width: 90%;
		height: 412upx;
		float: left;
		margin-left: 5%;
		background: #fff;
		border-radius: 16upx;
		margin-top: 10upx;
	}

	.chelgu {
		width: 90%;
		height: 50upx;
		float: left;
		margin-left: 5%;
		margin-top: 15upx;
	}

	.tupdinw {
		width: 90%;
		height: 250upx;
		float: left;
		margin-left: 5%;
		margin-top: 15upx;
	}

	.dindanlistab {
		width: 90%;
		height: 914upx;
		float: left;
		margin-top: 30upx;
		margin-left: 5%;
		border-radius: 16upx;
		background: #FFFFFF;
	}

	.ddnriong {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
	}

	.ttlias {
		width: 100%;
		height: 82upx;
		float: left;
		border-bottom: 1upx solid#ccc;
	}

	.huoyuns {
		width: 100%;
		height: 44upx;
		float: left;
		margin-top: 30upx;
	}

	.hya {
		width: 72upx;
		height: 44upx;
		border-radius: 10upx;
		border: 1upx solid #0085FC;
		text-align: center;
		line-height: 44upx;
		color: #0085FC;
		font-size: 20upx;
		float: left;
	}

	.zhuangxie {
		width: 100%;
		height: 304upx;
		float: left;
		background: rgba(1, 149, 253, 0.05);
		margin-top: 40upx;
		border-radius: 10upx;
	}

	.zhuangxiea {
		width: 100%;
		height: 414upx;
		float: left;
		background: #fff;
		margin-top: 40upx;
		border-radius: 10upx;
	}

	.dinwx {
		width: 90%;
		height: 122upx;
		float: left;
		margin-top: 32upx;
		margin-left: 5%;
	}

	.z {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #0194fd;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.x {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #FF902A;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.shuru {
		width: 85%;
		height: 122upx;
		border-radius: 10upx;
		float: left;
		margin-left: 16upx;
	}

	.shurk {
		width: 70%;
		height: 100%;
		float: left;
		margin-left: 16upx;
	}

	.dizpu {
		width: 25%;
		height: 40upx;
		float: left;
		border-left: 1upx solid #ccc;
		margin-top: 40upx;
		text-align: right;
		color: #777777;
	}

	.dzcylx {
		width: 176upx;
		height: 52upx;
		float: left;
		background: #F6F6F6;
		border-radius: 5upx;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.dinwxaa {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;
		background: rgba(1, 149, 253, 0.05);
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 1upx solid #0195FD;
	}

	.dinwxaac {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;

		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;

	}

	.imsl {
		width: 32upx;
		height: 32upx;
		float: left;
		margin-top: 40upx;
		margin-left: 25upx;
	}

	.ykhg {
		width: 150upx;
		height: 100%;
		float: left;
		margin-left: 20upx;
		line-height: 122upx;
		text-align: center;
	}

	.jgfy {
		width: 150upx;
		height: 100%;
		float: right;
		margin-right: 20upx;
		line-height: 122upx;
		text-align: center;
	}

	.anyfh {
		width: 90%;
		height: 92upx;
		float: left;
		margin-left: 5%;

	}

	.yongxhe {
		width: 70%;
		height: 100%;
		float: left;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		background: #0194fd;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}

	.yuyue {
		width: 30%;
		height: 100%;
		float: left;
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		background: #FF902A;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}

	.mymone {
		width: 100%;
		height: 150upx;
		float: left;
		background: #fff;

		.wdqb {
			width: 90%;
			height: 100%;
			float: left;
			margin-left: 5%;

			.title_mymone {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				border-bottom: 1upx solid #ccc;
				float: left;
			}

			.yuemone {
				width: 100%;
				height: 150upx;
				float: left;

				.litbs {
					width: 28%;
					height: 100%;
					float: left;
					margin-left: 4%;

				}
			}
		}

	}

	.bzhua {
		width: 100%;
		height: 108upx;
		background: #F8F8F8;
		float: left;
	}

	.ckxq {
		width: 236upx;
		height: 88upx;
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 2upx solid #0195FD;
		float: left;
		text-align: center;
		color: #0195FD;
		line-height: 88upx;
		margin-top: 20upx;
	}

	.get-bnt {
		margin-top: 20upx;
		text-align: center;
		width: 340upx;
		height: 88upx;
		line-height: 88upx;
		background: #0195FD;
		border-radius: 16upx;
		float: right;
		font-size: 30upx;
		color: #FFFFFF;
	}
</style>